<template>
  <Modal
  v-model="form.visible"
  :width="1000"
  title="年度活动计划查看">
    <Row class="mt20">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :label-width="120">
          <FormItem prop="act_year" label="年份">
            {{ form.data.act_year }}
          </FormItem>
          <FormItem prop="act_name" label="计划名称">
            {{ form.data.act_name }}
          </FormItem>
          <FormItem prop="act_type" label="活动类型">
            <Select v-model="form.data.act_type" placeholder="请选择" disabled>
              <Option v-for="(item, index) in actTypeCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="act_sdate" label="活动开始时间">
            {{ form.data.act_sdate | formatDate('YYYY-MM') }}
          </FormItem>
          <FormItem prop="act_edate" label="活动结束时间">
            {{ form.data.act_edate | formatDate('YYYY-MM') }}
          </FormItem>
          <FormItem prop="remak" label="活动简述">
            {{ form.data.remak }}
          </FormItem>
          <FormItem prop="date" label="活动图片">
            <view-img v-if="form.visible" :defaultImageList="defaultImageList"></view-img>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <div slot="footer">
      <Button @click="closeModal()" type="primary">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import viewImg from '@/components/view-img'

  export default {
    name: 'detail-modal',
    props: [
      'form'
    ],
    components: {
      viewImg
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        actYearCodeList: 'actYearCodeList',
        actTypeCodeList: 'actTypeCodeList'
      })
    },
    data () {
      return {
      }
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      onClose (isVisible) {
        if (isVisible) {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.planImage)
        }
      },
      closeModal () {
        this.form.visible = false
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'act_year')
      this.$store.dispatch('getCode', 'act_type')
    }
  }
</script>

